<template>
  <view class="classroom-container">
    <!-- Custom Loading Overlay -->
    <view class="loading-overlay" v-if="isDownloading">
      <view class="loading-container">
        <view class="loading-spinner"></view>
        <text class="loading-text">正在下载 {{ downloadingFileName }}</text>
        <text class="loading-progress">{{ downloadProgress }}%</text>
      </view>
    </view>

    <!-- Header -->
    <view class="header">
      <view class="header-content">
        <view class="header-left">
          <view class="back-btn" @click="goBack">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="icon-chevron-left">
              <polyline points="15 18 9 12 15 6"></polyline>
            </svg>
          </view>
          <text class="header-title">{{ courseData.title }}</text>
        </view>
        <view class="header-right">
        </view>
      </view>
    </view>

    <!-- Main content -->
    <scroll-view scroll-y class="main-content">
      <!-- Course info card -->
      <view class="course-card">
        <view class="course-card-header">
          <view>
            <text class="course-title">{{ courseData.title }}</text>
            <view class="course-instructor">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-user">
                <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
                <circle cx="12" cy="7" r="4" />
              </svg>
              <text>{{ courseData.instructor }}</text>
            </view>
          </view>
          <view class="badge badge-blue">进行中</view>
        </view>

        <view class="course-card-content">
          <view class="progress-container">
            <view class="progress-header">
              <text class="progress-label">课程进度</text>
              <text class="progress-value">{{ courseData.progress }}%</text>
            </view>
            <view class="progress-bar">
              <view class="progress-indicator" :style="{ width: courseData.progress + '%' }"></view>
            </view>
            <view class="progress-footer">
              <text class="progress-text">已完成 {{ courseData.completedLessons }} 课时</text>
              <text class="progress-text">共 {{ courseData.totalLessons }} 课时</text>
            </view>
          </view>

          <view class="next-class">
            <view class="next-class-header">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="icon-calendar">
                <rect width="18" height="18" x="3" y="4" rx="2" ry="2" />
                <line x1="16" x2="16" y1="2" y2="6" />
                <line x1="8" x2="8" y1="2" y2="6" />
                <line x1="3" x2="21" y1="10" y2="10" />
              </svg>
              <text class="next-class-title">下一节课</text>
            </view>
            <text class="next-class-name">{{ courseData.nextClass }}</text>
            <view class="next-class-time">
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="icon-clock">
                <circle cx="12" cy="12" r="10" />
                <polyline points="12 6 12 12 16 14" />
              </svg>
              <text>{{ courseData.nextClassTime }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- Course Timeline Module -->
      <view class="module course-module">
        <view class="module-header">
          <view class="module-title">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="icon-graduation-cap">
              <path d="M22 10v6M2 10l10-5 10 5-10 5z" />
              <path d="M6 12v5c0 2 2 3 6 3s6-1 6-3v-5" />
            </svg>
            <text>课程时间线</text>
          </view>
          <view class="badge badge-outline badge-blue">{{ courseTimelineItems.length }} 课时</view>
        </view>

        <view class="timeline course-timeline">
          <view class="timeline-item" v-for="(item, index) in courseTimelineItems" :key="item.id">
            <view class="timeline-dot" :class="{ 'completed': item.completed }">
              <svg v-if="item.completed" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="icon-check-circle">
                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
                <polyline points="22 4 12 14.01 9 11.01" />
              </svg>
            </view>

            <view class="timeline-card" :class="{ 'completed': item.completed }">
              <text class="timeline-title">{{ item.title }}</text>

              <view class="timeline-info">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                  class="icon-calendar">
                  <rect width="18" height="18" x="3" y="4" rx="2" ry="2" />
                  <line x1="16" x2="16" y1="2" y2="6" />
                  <line x1="8" x2="8" y1="2" y2="6" />
                  <line x1="3" x2="21" y1="10" y2="10" />
                </svg>
                <text>{{ item.date }}</text>
              </view>

              <view class="timeline-info">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                  class="icon-clock">
                  <circle cx="12" cy="12" r="10" />
                  <polyline points="12 6 12 12 16 14" />
                </svg>
                <text>{{ item.duration }}</text>
              </view>

              <view v-if="!item.completed" class="timeline-footer">
                <view class="timeline-status">
                  <text>即将开始</text>
                </view>
                <view class="timeline-action">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="icon-video">
                    <path d="m22 8-6 4 6 4V8Z" />
                    <rect width="14" height="12" x="2" y="6" rx="2" ry="2" />
                  </svg>
                  <text>预习</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- Course Materials Module -->
      <view class="module materials-module">
        <view class="module-header">
          <view class="module-title">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-book">
              <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
            </svg>
            <text>课程资料</text>
          </view>
          <view class="badge badge-outline badge-green">{{ courseContent.length }} 课件</view>
        </view>

        <view class="search-container">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-search">
            <circle cx="11" cy="11" r="8" />
            <path d="m21 21-4.3-4.3" />
          </svg>
          <input type="text" placeholder="搜索课件..." class="search-input" />
        </view>

        <view class="content-list">
          <view class="content-card" v-for="item in courseContent" :key="item.id" @click="handleContentClick(item)">
            <view class="content-thumbnail">
              <image :src="item.thumbnail" mode="aspectFill" class="thumbnail-image" />
              <view v-if="item.type === 'video'" class="thumbnail-overlay">
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                  class="icon-play-circle">
                  <circle cx="12" cy="12" r="10" />
                  <polygon points="10 8 16 12 10 16 10 8" />
                </svg>
              </view>
              <view v-if="item.type === 'document'" class="document-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                  class="icon-file-text">
                  <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
                  <polyline points="14 2 14 8 20 8" />
                  <line x1="16" x2="8" y1="13" y2="13" />
                  <line x1="16" x2="8" y1="17" y2="17" />
                  <line x1="10" x2="8" y1="9" y2="9" />
                </svg>
              </view>
            </view>

            <view class="content-details">
              <text class="content-title">{{ item.title }}</text>
              <view class="content-info">
                <svg v-if="item.type === 'video'" xmlns="http://www.w3.org/2000/svg" width="12" height="12"
                  viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round" class="icon-play-circle">
                  <circle cx="12" cy="12" r="10" />
                  <polygon points="10 8 16 12 10 16 10 8" />
                </svg>
                <svg v-if="item.type === 'document'" xmlns="http://www.w3.org/2000/svg" width="12" height="12"
                  viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round" class="icon-file-text">
                  <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
                  <polyline points="14 2 14 8 20 8" />
                  <line x1="16" x2="8" y1="13" y2="13" />
                  <line x1="16" x2="8" y1="17" y2="17" />
                  <line x1="10" x2="8" y1="9" y2="9" />
                </svg>
                <text>{{ item.type === 'video' ? item.duration : item.pages + ' 页' }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- Test Timeline Module -->
      <view class="module test-module">
        <view class="module-header">
          <view class="module-title">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="icon-test-tube">
              <path d="M14.5 2v7.5" />
              <path d="M18 2v7.5" />
              <path d="M4 15h16" />
              <path d="M6 15v6h12v-6" />
              <path d="M6.5 15a4.5 4.5 0 0 1-2.8-8" />
              <path d="M17.5 15a4.5 4.5 0 0 0 2.8-8" />
            </svg>
            <text>测试时间线</text>
          </view>
          <view class="badge badge-outline badge-purple">{{ testTimelineItems.length }} 测试</view>
        </view>

        <view class="timeline test-timeline">
          <view class="timeline-item" v-for="(item, index) in testTimelineItems" :key="item.id">
            <view class="timeline-dot" :class="{ 'completed': item.completed, 'test': true }">
              <svg v-if="item.completed" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="icon-check-circle">
                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
                <polyline points="22 4 12 14.01 9 11.01" />
              </svg>
            </view>

            <view class="timeline-card" :class="{ 'completed': item.completed, 'test': true }">
              <view class="timeline-header">
                <text class="timeline-title">{{ item.title }}</text>
                <view v-if="item.completed" class="badge badge-purple">{{ item.score }}</view>
                <view v-else class="badge badge-outline badge-gray">未开始</view>
              </view>

              <view class="timeline-info">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                  class="icon-calendar">
                  <rect width="18" height="18" x="3" y="4" rx="2" ry="2" />
                  <line x1="16" x2="16" y1="2" y2="6" />
                  <line x1="8" x2="8" y1="2" y2="6" />
                  <line x1="3" x2="21" y1="10" y2="10" />
                </svg>
                <text>{{ item.date }}</text>
              </view>

              <view v-if="!item.completed" class="timeline-footer">
                <view class="timeline-action test-action">
                  <text>查看详情</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// Add new refs for loading state
const isDownloading = ref(false);
const downloadingFileName = ref('');
const downloadProgress = ref(0);

// Get courseId from route parameters
const courseId = ref(null);

onMounted(() => {
  // Get courseId from route parameters
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const options = currentPage.$page.options;
  courseId.value = options.courseId;

  // TODO: Fetch course data based on courseId
  // For now, we'll use mock data
  console.log('Course ID:', courseId.value);
});

// Mock data
const courseData = ref({
  title: "人工智能与创意设计",
  instructor: "张教授",
  progress: 68,
  nextClass: "生成式AI模型原理",
  nextClassTime: "今天 14:00-15:30",
  completedLessons: 12,
  totalLessons: 18,
});

const courseTimelineItems = ref([
  {
    id: 1,
    title: "AI基础概念介绍",
    date: "2023-04-01",
    completed: true,
    duration: "90分钟",
  },
  {
    id: 2,
    title: "机器学习基础",
    date: "2023-04-03",
    completed: true,
    duration: "90分钟",
  },
  {
    id: 4,
    title: "深度学习入门",
    date: "2023-04-08",
    completed: true,
    duration: "90分钟",
  },
  {
    id: 5,
    title: "神经网络架构",
    date: "2023-04-10",
    completed: true,
    duration: "90分钟",
  },
  {
    id: 6,
    title: "生成式AI模型原理",
    date: "2023-04-15",
    completed: false,
    duration: "90分钟",
  },
]);

const testTimelineItems = ref([
  {
    id: 3,
    title: "第一阶段测验",
    date: "2023-04-05",
    completed: true,
    score: "92/100",
  },
  {
    id: 7,
    title: "第二阶段测验",
    date: "2023-04-20",
    completed: false,
  },
  {
    id: 8,
    title: "AI伦理与应用测验",
    date: "2023-04-25",
    completed: false,
  },
  {
    id: 9,
    title: "期末综合测验",
    date: "2023-05-10",
    completed: false,
  },
]);

const courseContent = ref([
  {
    id: 1,
    title: "课程介绍",
    type: "video",
    duration: "15分钟",
    thumbnail: "https://imagecgr.oss-cn-beijing.aliyuncs.com/jiegou.jpg",
    url: "https://imagecgr.oss-cn-beijing.aliyuncs.com/jiegou.jpg"
  },
  {
    id: 2,
    title: "AI基础概念",
    type: "document",
    pages: 24,
    thumbnail: "https://imagecgr.oss-cn-beijing.aliyuncs.com/luoji.jpg",
    url: "https://example.com/document1.pdfhttps://imagecgr.oss-cn-beijing.aliyuncs.com/jiegou.jpg"
  },
  {
    id: 3,
    title: "机器学习基础",
    type: "video",
    duration: "45分钟",
    thumbnail: "https://imagecgr.oss-cn-beijing.aliyuncs.com/men.jpg",
    url: "https://imagecgr.oss-cn-beijing.aliyuncs.com/uploade.mp4"
  },
]);

// Methods
const goBack = () => {
  uni.navigateBack();
};

const downloadFile = (item) => {
  isDownloading.value = true;
  downloadingFileName.value = item.title;
  downloadProgress.value = 0;

  uni.downloadFile({
    url: item.url,
    success: (res) => {
      if (res.statusCode === 200) {
        downloadProgress.value = 100;
        uni.saveFile({
          tempFilePath: res.tempFilePath,
          success: (res) => {
            isDownloading.value = false;
            uni.showToast({
              title: '下载成功',
              icon: 'success',
              duration: 2000
            });
          },
          fail: () => {
            isDownloading.value = false;
            uni.showToast({
              title: '保存成功',
              icon: 'error',
              duration: 2000
            });
          }
        });
      } else {
        isDownloading.value = false;
        uni.showToast({
          title: '下载失败',
          icon: 'error',
          duration: 2000
        });
      }
    },
    fail: () => {
      isDownloading.value = false;
      uni.showToast({
        title: '下载失败',
        icon: 'error',
        duration: 2000
      });
    }
  });
};

// 处理课程内容点击
const handleContentClick = (item) => {
  if (item.type === 'video') {
    uni.navigateTo({
      url: `/pages/OnlineStudy/OnlineStudy?videoUrl=${encodeURIComponent(item.url)}&title=${encodeURIComponent(item.title)}`
    });
  } else if (item.type === 'document') {
    // 处理文档点击
    uni.showToast({
      title: '文档阅读功能开发中',
      icon: 'none',
      duration: 2000
    });
  }
};
</script>

<style>
/* Global styles */
page {
  background-color: #f8fafc;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.classroom-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Header styles */
.header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #ffffff;
  border-bottom: 1px solid #e2e8f0;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #f1f5f9;
  cursor: pointer;
  transition: background-color 0.2s;
}

.back-btn:active {
  background-color: #e2e8f0;
}

.icon-chevron-left {
  color: #64748b;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #dbeafe;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #2563eb;
}

.avatar-text {
  font-size: 14px;
  font-weight: 600;
}

/* Main content styles */
.main-content {
  flex: 1;
  padding: 16px;
  height: calc(100vh - 68px);
}

/* Course card styles */
.course-card {
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  position: relative;
}

.course-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 128px;
  height: 128px;
  background-color: #2563eb;
  border-radius: 50%;
  opacity: 0.1;
  transform: translate(50%, -50%);
}

.course-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 96px;
  height: 96px;
  background-color: #60a5fa;
  border-radius: 50%;
  opacity: 0.1;
  transform: translate(-50%, 50%);
}

.course-card-header {
  padding: 16px 16px 8px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
}

.course-title {
  font-size: 20px;
  font-weight: 600;
  color: #1d4ed8;
  margin-bottom: 4px;
}

.course-instructor {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #64748b;
  font-size: 14px;
  margin-top: 4px;
}

.icon-user {
  color: #3b82f6;
}

.badge {
  padding: 4px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
}

.badge-blue {
  background-color: #2563eb;
  color: #ffffff;
}

.badge-outline {
  background-color: transparent;
  border: 1px solid;
}

.badge-outline.badge-blue {
  background-color: #dbeafe;
  color: #2563eb;
  border-color: #93c5fd;
}

.badge-outline.badge-green {
  background-color: #dcfce7;
  color: #16a34a;
  border-color: #86efac;
}

.badge-outline.badge-purple {
  background-color: #f3e8ff;
  color: #9333ea;
  border-color: #d8b4fe;
}

.badge-outline.badge-gray {
  background-color: transparent;
  color: #64748b;
  border-color: #cbd5e1;
}

.badge-purple {
  background-color: #9333ea;
  color: #ffffff;
}

.course-card-content {
  padding: 0 16px 16px;
  position: relative;
}

.progress-container {
  margin-bottom: 16px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 14px;
}

.progress-label {
  color: #64748b;
}

.progress-value {
  font-weight: 500;
  color: #2563eb;
}

.progress-bar {
  height: 8px;
  background-color: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}

.progress-indicator {
  height: 100%;
  background-color: #2563eb;
  border-radius: 4px;
}

.progress-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 12px;
  color: #64748b;
}

.next-class {
  padding: 12px;
  background-color: #eff6ff;
  border-radius: 8px;
  border: 1px solid #bfdbfe;
}

.next-class-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1e40af;
  font-weight: 500;
  margin-bottom: 4px;
}

.icon-calendar {
  color: #2563eb;
}

.next-class-title {
  font-weight: 500;
  color: #1e40af;
}

.next-class-name {
  font-size: 14px;
  font-weight: 500;
  color: #1e3a8a;
  margin-bottom: 4px;
}

.next-class-time {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
}

.icon-clock {
  color: #64748b;
}

/* Module styles */
.module {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.course-module {
  border: 1px solid #bfdbfe;
}

.materials-module {
  border: 1px solid #bbf7d0;
}

.test-module {
  border: 1px solid #e9d5ff;
}

.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.module-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
}

.course-module .module-title {
  color: #2563eb;
}

.materials-module .module-title {
  color: #16a34a;
}

.test-module .module-title {
  color: #9333ea;
}

.icon-graduation-cap,
.icon-book,
.icon-test-tube {
  color: currentColor;
}

/* Timeline styles */
.timeline {
  position: relative;
  padding-left: 24px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 2px;
}

.course-timeline::before {
  background-color: #bfdbfe;
}

.test-timeline::before {
  background-color: #e9d5ff;
}

.timeline-item {
  position: relative;
  margin-bottom: 24px;
}

.timeline-dot {
  position: absolute;
  left: -28px;
  top: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid;
  background-color: #ffffff;
}

.timeline-dot.completed {
  background-color: currentColor;
}

.course-timeline .timeline-dot {
  border-color: #93c5fd;
  color: #2563eb;
}

.test-timeline .timeline-dot {
  border-color: #d8b4fe;
  color: #9333ea;
}

.timeline-dot svg {
  position: absolute;
  left: -2px;
  top: -2px;
  width: 20px;
  height: 20px;
  color: currentColor;
  background-color: #ffffff;
  border-radius: 50%;
}

.timeline-card {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
}

.timeline-card.completed {
  background-color: rgba(239, 246, 255, 0.3);
}

.course-timeline .timeline-card.completed {
  border-color: #bfdbfe;
}

.test-timeline .timeline-card.completed {
  border-color: #e9d5ff;
}

.timeline-title {
  font-weight: 500;
  margin-bottom: 8px;
}

.timeline-info {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #64748b;
  margin-bottom: 4px;
}

.timeline-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e2e8f0;
}

.timeline-status {
  font-size: 14px;
  color: #64748b;
}

.timeline-action {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #2563eb;
}

.test-action {
  justify-content: flex-end;
  color: #9333ea;
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

/* Search styles */
.search-container {
  position: relative;
  margin-bottom: 16px;
}

.icon-search {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
}

.search-input {
  width: 100%;
  padding: 8px 8px 8px 36px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background-color: #f8fafc;
  font-size: 14px;
}

/* Content list styles */
.content-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.content-card {
  display: flex;
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #bbf7d0;
}

.content-thumbnail {
  position: relative;
  width: 96px;
  height: 80px;
  background-color: #e2e8f0;
  flex-shrink: 0;
}

.thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumbnail-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.3);
}

.icon-play-circle {
  color: #ffffff;
}

.document-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: #ffffff;
  border-radius: 50%;
  padding: 4px;
}

.icon-file-text {
  color: #16a34a;
}

.content-details {
  flex: 1;
  padding: 12px;
}

.content-title {
  font-weight: 500;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.content-info {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
}

.content-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.btn {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.btn-text {
  background-color: transparent;
}

.btn-outline {
  background-color: transparent;
  border: 1px solid;
}

.btn-green {
  color: #16a34a;
}

.btn-outline.btn-green {
  border-color: #bbf7d0;
  color: #16a34a;
}

/* Icon styles */
.icon-chevron-left,
.icon-settings,
.icon-user,
.icon-calendar,
.icon-clock,
.icon-graduation-cap,
.icon-book,
.icon-test-tube,
.icon-check-circle,
.icon-video,
.icon-search,
.icon-play-circle,
.icon-file-text {
  flex-shrink: 0;
}

/* Loading Overlay Styles */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.loading-container {
  background-color: #ffffff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: 200px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #e2e8f0;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-text {
  font-size: 14px;
  color: #1e293b;
  font-weight: 500;
}

.loading-progress {
  font-size: 12px;
  color: #64748b;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
</style>